<template>
	<view class="page">
		<!-- 打卡日历页面 -->
		<view class='all'>
				<view class="bar">
					<!-- 上一个月 -->
					<view class="previous" @click="handleCalendar(0)">
						<button class="barbtn">上一月</button>
					</view>
					<!-- 显示年月 -->
					<view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
					<!-- 下一个月 -->
					<view class="next" @click="handleCalendar(1)">
						<button class="barbtn">下一月</button>
					</view>
				</view>
				<!-- 显示星期 -->
				<view class="week">
					<view class="week_ri" v-for="(item,index) in weeks_ch" :key="index">{{item}}</view>
				</view>
				<view  class="myDateTable">
					<view v-for="(item,j) in days" :key="j" class='dateCell'>
						<view v-if="item.date==undefined || item.date == null" class='cell'>
							<text :decode="true">&nbsp;&nbsp;</text>
						</view>
						<view v-else @click="clickSignUp(item.date)">
							<!-- 已订餐到日期 -->
							<view v-if="item.isSign == 2" class='cell yellow' style="background: #0072e5;color: #ffffff;">
								<text>{{item.date}}</text>
							</view>
							<!-- 今日日期-->
		<!-- 					<view class="cell white bg-red" v-else-if="cur_year==toYear && cur_month==toMonth && item.date==today ">
								<text>{{item.date}}</text>
							</view> -->
							<!-- 点击的日期 -->
							<view class="cell white bg-red" style="background: #ffaa7f;color: #ffffff;" v-else-if="item.isSign == 3">
								<text>{{item.date}}</text>
							</view>
							<!-- 当前日期之后 -->
							<view class="whiteColor cell" v-else>
								<text>{{item.date}}</text>
							</view>
						</view>
		 
					</view>
				</view>
			
		</view>
		<view class="searchBox">
			<view class="inputBox">
					<view class="inputRow" style="">
						<view class="label">
							<text class="red">*</text>
							{{'餐段'}}:
						</view>
						<view  class="val" >
								<u-checkbox-group
										v-model="params.productIdList"
										placement="column"
									>
										<u-checkbox
										    :customStyle="{marginBottom: '8px'}"
										    v-for="(item, index) in mealList"
										    :key="index"
										    :label="item.label"
										    :name="item.value"
										>
										</u-checkbox>
									</u-checkbox-group>
						</view>
					</view>
			</view>
			
			
		</view>
		<view class="submitBtn"  @click="handleSubmit">
			提交
		</view>
	

	</view>
</template>

<script>
	import {teachAddApi,csMealsProductListApi,listByDiningDayApi} from '@/common/api/commonApi/bookingMeal.js'
	export default {
		data() {
			return {
				params:{
					// diningDay: '',
					diningDays: [],
					productIdList : [],
				},
				productIdList : [],
				mealList:[],
				days: [],//日历
				SignUp: [],//已经订餐
				cur_year: 0, //当前选的年
				cur_month: 0, //当前选的月
				today: parseInt(new Date().getDate()), //今天
				toMonth: parseInt(new Date().getMonth() + 1), //本月
				toYear: parseInt(new Date().getFullYear()), //本年
				weeks_ch: ['日', '一', '二', '三', '四', '五', '六']
			}
		},
		props: {
					//年
					sendYear: {
						type: Number,
						default: new Date().getFullYear()
					},
					//月
					sendMonth: {
						type: Number,
						default: new Date().getMonth() + 1
					},
				},
		components:{
		},
		async created() {
					this.cur_year = this.sendYear;//年
					this.cur_month = this.sendMonth;//月
					this.calculateEmptyGrids(this.cur_year, this.cur_month);
					this.calculateDays(this.cur_year, this.cur_month);
					//网络请求
					let days=this.getThisMonthDays(this.cur_year, this.cur_month);
					let beg=this.cur_year+'-'+((this.cur_month<10)?'0'+this.cur_month:this.cur_month)+'-01';
					let end=this.cur_year+'-'+((this.cur_month<10)?'0'+this.cur_month:this.cur_month)+'-'+days;
					await this.getlistByDiningDayApi(beg,end);
					this.onJudgeSign(this.SignUp);
		},
		methods: {
			selectConfirm(e){
				console.log(e);
				this.selectLabel = e.value[0].label
				// this.params.deviceId = e.value[0].id
				this.params.attTimePeriodId = e.value[0].value
				this.selectShow = false
			},
			handleSubmit(){
				let selectDays = this.days.filter(item=>{return item.isSign==3})
				this.params.diningDays = []
				selectDays.forEach(item=>{
					this.params.diningDays.push(`${this.cur_year}-${this.cur_month}-${item.date}`)
				})
				if(!this.params.diningDays.length) return this.setMessage('请选择就餐日期')
				console.log(this.params.diningDay);
				if(!this.params.productIdList.length) return this.setMessage('请选择餐段')
				teachAddApi(this.params).then(res=>{
						this.setMessage('订餐成功')
						setTimeout(()=>{
							this.goBack()
						},500)
				})
			},
			getMealList(){
				return csMealsProductListApi({
					status : 1,
				}).then(res=>{
					this.mealList = []
					res.result.records.forEach(item=>{
						this.mealList.push({
								label: item.mealName,
								value: item.id
						})
					})
					console.log(this.mealList);
				})
			},
			getlistByDiningDayApi(begin,end){
				return listByDiningDayApi({
					diningDay_begin : begin,
					diningDay_end : end,
				}).then(res=>{
					this.SignUp = []
					res.result.records.forEach(item=>{
						this.SignUp.push(item.diningDay.split('-')[2])
					})
					console.log(111);
					console.log(this.SignUp);
				})
				
			},
			// 获取当月共多少天
				getThisMonthDays(year, month) {
					return new Date(year, month, 0).getDate()
				},
				// 获取当月第一天星期几
				getFirstDayOfWeek(year, month) {
					return new Date(Date.UTC(year, month - 1, 1)).getDay();
				},
				// 计算当月1号前空了几个格子，把它填充在days数组的前面
				calculateEmptyGrids(year, month) {
					//计算每个月时要清零
					this.days = [];
					const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
					if (firstDayOfWeek > 0) {
						for (let i = 0; i < firstDayOfWeek; i++) {
							var obj = {
								date: null,
								isSign: false
							}
							this.days.push(obj);
						}
					}
				},
				// 绘制当月天数占的格子，并把它放到days数组中
				calculateDays(year, month) {
					const thisMonthDays = this.getThisMonthDays(year, month);
					for (let i = 1; i <= thisMonthDays; i++) {
						var obj = {
							date: i,
							isSign: false
						}
						this.days.push(obj);
					}
					//console.log(this.days);
				},
				//匹配判断当月与当月哪些日子订餐
				onJudgeSign(date) {
					var signs = date;
					var daysArr = this.days;
					//日期相同，订过餐
					for(var i=0;i<signs.length;i++){
						for (var j=0; j<daysArr.length;j++) {
							if (daysArr[j].date == signs[i]) {
								daysArr[j].isSign = 2;
							}
						}
					}
					this.days = daysArr;
				},
				// 切换控制年月，上一个月，下一个月
				async handleCalendar(type) {
					this.days = []
					const cur_year = parseInt(this.cur_year);
					const cur_month = parseInt(this.cur_month);
					var newMonth;
					var newYear = cur_year;
					if (type === 0) { //上个月
						newMonth = cur_month - 1;
						if (newMonth < 1) {
							newYear = cur_year - 1;
							newMonth = 12;
						}
					} else {
						newMonth = cur_month + 1;
						if (newMonth > 12) {
							newYear = cur_year + 1;
							newMonth = 1;
						}
					}
					this.calculateEmptyGrids(newYear, newMonth);
					this.calculateDays(newYear, newMonth);
					
					//网络请求
					let days=this.getThisMonthDays(newYear, newMonth);
					let beg=newYear+'-'+((newMonth<10)?'0'+newMonth:newMonth)+'-01';
					let end=newYear+'-'+((newMonth<10)?'0'+newMonth:newMonth)+'-'+days;
					await this.getlistByDiningDayApi(beg,end);
					//this.SignUp = [3,11];
					this.onJudgeSign(this.SignUp);
	                
					this.cur_year = newYear;
					this.cur_month = newMonth;
	 
					// this.SignUp = []; //清空
					this.$emit('dateChange',this.cur_year+"-"+this.cur_month); //传给调用模板页面去拿新数据				
				},
				//点击日期
				clickSignUp(t){
					console.log(this.cur_year)//年
					console.log(this.cur_month)//月
					var t = t;//点击的天
					console.log(t);
					var signs = this.SignUp;
					
					var daysArr = this.days;
					console.log(signs);
					//日期相同，订过餐,点击的日期
					for (var j=0; j<daysArr.length;j++) {
						if(t == daysArr[j].date && daysArr[j].isSign==3){
							daysArr[j].isSign = 1
						}else if(t == daysArr[j].date && daysArr[j].isSign!=2){
							daysArr[j].isSign = 3
						}
					}
					this.days = daysArr;
				}

		},
		onLoad({}) {
			this.getMealList()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #f1f1f1;
	
	.all {
			.bar {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 10rpx;
				
				.barbtn {
					height: 30px;
					line-height: 30px;
					font-size: 12px;
				}
			}
		 
			
	
			.week {
				display: flex;
				/* flex-direction: row; */
				/* justify-content: space-between; */
				padding: 20rpx 0;
				border-radius: 10px;
				background-color: #fff;
				// width: 90%;
				margin: 20rpx;
				.week_ri{
					flex: 1;
					text-align: center;
				}
			}
			
			.myDateTable {
				margin: 20rpx;
				border-radius: 10px;
				background: #fff;
				padding: 20rpx 0;
				.dateCell {
						// width: 13vw;
						width: 14.28%;
						padding: 1vw;
						display: inline-block;
						text-align: center;
						font-size: 16px;
						
						.cell {
								display: flex;
								border-radius: 50%;
								height: 70rpx;
								width: 70rpx;
								justify-content: center;
								align-items: center;
								
							}
				}
			}
		}
	// height: 100vh;
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding:  20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		// box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			// flex: 1;
			padding-right: 30rpx;
			display: flex;
			flex-wrap: wrap;
			.inputRow{
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
				height: 120rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.text{
				margin: 0 20rpx;
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	
	.submitBtn{
		margin: 40rpx;
		// width: 110rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	
	.boxItem{
			background-color: #fff;
			margin: 20rpx;
			border-radius: 8rpx;
			padding: 10rpx;
			box-shadow: 0px 0px 20rpx 0px rgba(102,102,102,0.15);
			.row{
				margin: 10rpx;
				display: flex;
				.item{
					width: 50%;
					// flex: 1;
				}
				.label{
					color: #969696;
				}
				.val{
					color: #353535;
					font-size: 32rpx;
				}
				.btn{
						padding: 0 30rpx;
						width: 120rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #1890ff;
						border-radius: 8rpx;
						color: #fff;
				}
			}
		}
		
}
.red{
	color: #ff4d4d;
}

.applyResult{
	width: 100%;
	margin-top: 20rpx;
	display: flex;
	justify-content: center;
}
</style>
